<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>sigin</title>
</head>

<BODY background="images/bg.jpg">
    <table border="0px" style="width:100%;">
        <tr style="height:200px">
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="3">
                <div style="text-align:center;">
                    <h1 style="color:rgb(239, 243, 243);font-size:48px;">用 户 注 册</h1>
                </div>
            </td>

        </tr>
        <tr>
            <td></td>
            <td>
                <div>

                    <table style="width:100%;" cellspacing="0" cellpadding="0" border="0px">
                        <tr style="height:55px">
                            <td style="color:aliceblue;">

                                <div style="text-align:center;height: 46px;width: 300px;padding: 0 5px;margin-bottom: 0px;border-radius: 100px;
                                position: relative;border: rgba(255,255,255,0.2) 2px solid !important;margin-left: 42%;">
                                    <span style="position: absolute;margin: 5px -128px;font-size:23px">姓名:</span>
                                    <span style="width: 25px;height: 25px;background: url(images/login_ico.png);
                                   background-position:  -125px 0;position: absolute;margin: 10px -50px;"></span>

                                    <input type="text" id="stuname" style="color: rgb(248, 242, 242);height: 40px;width:180px;background-color:transparent;border:none;outline:none;">
                                </div>
                            </td>
                        </tr>
                        <tr style="height:55px">
                            <td style="color:aliceblue;">
                                <div style="text-align:center;height: 46px;width: 300px;padding: 0 5px;margin-bottom: 0px;border-radius: 50px;
                                position: relative;border: rgba(255,255,255,0.2) 2px solid !important;margin-left: 42%;">

                                    <span style="position: absolute;margin: 5px -128px;font-size:23px">密码:</span>
                                    <span style="width: 25px;height: 25px;background: url(images/login_ico.png);
                                    background-position:  -85px -156px;position: absolute;margin: 10px -50px;"></span>

                                    <input type="password" id="stupass" style="color: rgb(248, 242, 242);height: 40px;width:180px;background-color:transparent;border:none;outline:none;">
                                </div>
                            </td>
                        </tr>
                        <tr style="height:55px">
                            <td style="color:aliceblue;">
                                <div style="text-align:center;height: 46px;width: 300px;padding: 0 5px;margin-bottom: 0px;border-radius: 50px;
                                position: relative;border: rgba(255,255,255,0.2) 2px solid !important;margin-left: 42%;">

                                    <span style="position: absolute;margin: 5px -128px;font-size:23px">确认:</span>
                                    <span style="width: 25px;height: 25px;background: url(images/login_ico.png);
                                    background-position:  -85px -156px;position: absolute;margin: 10px -50px;"></span>

                                    <input type="password" id="sturepass" style="color: rgb(248, 242, 242);height: 40px;width:180px;background-color:transparent;border:none;outline:none;">
                                </div>
                            </td>
                        </tr>
                        <tr style="height:55px">
                            <td style="color:aliceblue;">
                                <div style="text-align:center;height: 46px;width: 300px;padding: 0 5px;margin-bottom: 0px;border-radius: 50px;
                                position: relative;border: rgba(255,255,255,0.2) 2px none !important;margin-left: 42%;">

                                    <span style="position: absolute;margin: 5px -216px;font-size:23px">性别:</span>
                                    <!-- <span style="width: 25px;height: 25px;background: url(images/login_ico.png);
                                background-position:  -85px -156px;position: absolute;margin: 10px -140px;"></span> -->
                                    <span style="position: absolute;margin: 5px -80px;font-size:23px">男</span>
                                    <input type="radio" name="stusex" value="男" style="color: rgb(248, 242, 242);height: 20px;width:40px;background-color:transparent;border:none;outline:none;position: absolute;margin: 10px -50px;">
                                    <span style="position: absolute;margin: 5px 0px;font-size:23px">女</span>
                                    <input type="radio" name="stusex" value="女" style="color: rgb(248, 242, 242);height: 20px;width:40px;background-color:transparent;border:none;outline:none;position: absolute;margin: 10px 30px;">
                                </div>
                            </td>
                        </tr>
                        <tr style="height:55px">
                            <td style="color:aliceblue;">
                                <div style="text-align:center;height: 46px;width: 300px;padding: 0 5px;margin-bottom: 0px;border-radius: 50px;
                                position: relative;border: rgba(255,255,255,0.2) 2px solid !important;margin-left: 42%;">

                                    <span style="position: absolute;margin: 5px -128px;font-size:23px">年龄:</span>
                                    <span style="width: 25px;height: 25px;background: url(images/login_ico.png);
                                    background-position:  -85px -156px;position: absolute;margin: 10px -50px;"></span>

                                    <input type="number" id="stuage" style="color: rgb(248, 242, 242);height: 40px;width:180px;background-color:transparent;border:none;outline:none;">
                                </div>
                            </td>
                        </tr>
                        <tr style="height:60px">
                            <td style="color:aliceblue;">
                                <div style="text-align:center;height: 46px;width: 300px;padding: 0 5px;margin-bottom: 0px;border-radius: 50px;
                                position: relative;border: rgba(255,255,255,0.2) 2px solid !important;margin-left: 42%;">

                                    <span style="position: absolute;margin: 5px -128px;font-size:23px">电话:</span>
                                    <span style="width: 25px;height: 27px;background: url(images/login_ico.png);
                                background-position:  -85px -111px;position: absolute;margin: 10px -50px;"></span>


                                    <input type="tel" id="stutel" style="color: rgb(248, 242, 242);height: 40px;width:180px;background-color:transparent;border:none;outline:none;">
                                </div>
                            </td>
                        </tr>
                        <tr style="width:100px;height:100px">
                            <td colspan="3">
                                <div style="text-align:center;">
                                    <span style="font-size:35px;color:#edf3ef">———没有账号？———</span>
                                </div>

                            </td>
                        </tr>
                        <tr style="height:55px">
                            <td>
                                <div style="text-align:center;">
                                    <div>
                                        <input type="button" id="addstudent" onclick="addstudent();" value="点击注册" style="color: #FFFFFF;width: 200px;height:50px;border:none;outline:none;
                                        line-height: 20px;
                                        text-align: center;
                                        font-size: 20px;
                                        border-radius: 50px;
                                        background: #009933;
                                        " onclick="addstudent();">
                                        <input type="button" id="login" onclick="goLogin();" value="现在登陆" style="color: #FFFFFF;width: 200px;height:50px;border:none;outline:none;
                                        line-height: 20px;
                                        text-align: center;
                                        font-size: 20px;
                                        border-radius: 50px;
                                        background: #009933;
                                        " onclick="addstudent();">
                                        <!-- #0099CC -->
                                        <!-- #009933 -->
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <script>
        var students = [];
        var work = {
            add: function (name,pass,sex, age, tel) {
                var stu = {
                    stuname: name,
                    stupass: pass,
                    stusex: sex,
                    stuage: age,
                    stutel: tel
                }
                students.push(stu);
                alert("添加成功");
                alert("用户名"+name+"密码"+pass+"性别"+sex+"年龄"+age+"电话"+tel);
                console.log("添加成功");
            }
        }

        function addstudent() {
            var stusexchecked;
            var stuname = document.getElementById("stuname");
            var stusex = document.getElementsByName("stusex");
            var stuage = document.getElementById("stuage");
            var stupass = document.getElementById("stupass");
            var sturepass = document.getElementById("sturepass");
            var stutel = document.getElementById("stutel");

            for (var i = 0; i < stusex.length; i++) {
                if (stusex[i].checked == true) {
                    stusexchecked = stusex[i].value;
                    break;
                }
            }
            if (stuname.value != "" && stusexchecked != "" && stuage.value != "" && stutel.value != "" &&stupass.value!="" &&sturepass.value!="" &&stupass.value==sturepass.value) {

                work.add(stuname.value,stupass.value, stusexchecked, stuage.value, stutel.value);
            }else if(sturepass.value != stupass.value){
                alert("两次密码不一致");
            }
        }
        function goLogin(){
            window.location.href = "login.html";
        }
    </script>

</BODY>

</html>